<template>
	<view class="columnbox wdh-100 content">
		<view class="rowbox spb one-info">
			<image :src="info.image" mode="aspectFill" class="m-img"></image>
			<view class="columnbox als m-detail">
				<view class="m-name wdh-100 textovflow">{{info.name}}</view>
				<view class="m-desc">{{info.changjia}}</view>
				<view class="rowbox wdh-100 spb">
					<view class="m-desc">{{info.guige}}</view>
					<view class="rowbox">
						<view class="price-info">¥{{info.price}}</view>
						<!-- <view class="stock">库存89</view> -->
					</view>
				</view>
			</view>
		</view>
		<view class="u-box rowbox spb">
			<view>用法</view>
			<view @click="popupflag=true,curpopup=1" class="rowbox">{{yongfa.name||'选择'}}
				<u-icon name="arrow-right" size="24rpx"></u-icon>
			</view>
		</view>
		<!--    <picker mode="selector" @change="yfChange" :range="selList.yongfa" range-key="name">
            <view class="u-box rowbox spb">
                <view>用法</view>
                <view class="rowbox">{{yongfa.name||'选择'}}
                    <u-icon name="arrow-right" size="24rpx"></u-icon>
                </view>
            </view>
        </picker> -->
		<view class="u-box rowbox spb">
			<view>使用频次</view>
			<view @click="popupflag=true,curpopup=2" class="rowbox">{{pinci.name||'选择'}}
				<u-icon name="arrow-right" size="24rpx"></u-icon>
			</view>
		</view>
		<!-- <picker mode="selector" @change="pinciChange" :range="selList.pinci" range-key="name">
            <view class="u-box rowbox spb">
                <view>使用频次</view>
                <view class="rowbox">{{pinci.name||'选择'}}
                    <u-icon name="arrow-right" size="24rpx"></u-icon>
                </view>
            </view>
        </picker> -->
		<view class="u-box rowbox spb">
			<view>每次用量</view>
			<view class="rowbox">
				<input @input="getNum" v-model="yongliang" placeholder="请输入用量" />
				<view @click="popupflag=true,curpopup=3" class="rowbox">
					{{ylunit.name||'选择单位'}}
					<u-icon name="arrow-right" size="24rpx"></u-icon>
				</view>
				<!-- <picker mode="selector" @change="ylunitChange" :range="selList.ylunit" range-key="name">
                    <view class="rowbox">
                        {{ylunit.name||'选择单位'}}
                        <u-icon name="arrow-right" size="24rpx"></u-icon>
                    </view>
                </picker> -->
			</view>
		</view>
		<view class="u-box rowbox spb">
			<view>用药天数</view>
			<view class="rowbox">
				<input @input="getNum" v-model="daynum" placeholder="请输入天数" />
			</view>
		</view>
		<view class="u-box rowbox spb">
			<view>开药数量</view>
			<view class="rowbox">
				<input v-model="num" placeholder="请输入数量" />
				<view class="rowbox" @click="popupflag=true,curpopup=4">
					{{kynuit.name||'选择单位'}}
					<u-icon name="arrow-right" size="24rpx"></u-icon>
				</view>
				<!-- <picker mode="selector" @change="kynuitChange" :range="selList.kynuit" range-key="name">
                    <view class="rowbox">
                        {{kynuit.name||'选择单位'}}
                        <u-icon name="arrow-right" size="24rpx"></u-icon>
                    </view>
                </picker> -->
			</view>
		</view>
		<view class="rowbox wdh-100 bottom-box">
			<view @click="confirmInfo" class="rowbox send-btn wdh-100">添加</view>
		</view>
		<u-popup :show="popupflag" mode="bottom" round="20rpx" closeable @close="popupflag=false">
			<view class="p-title">请选择</view>
			<scroll-view scroll-y style="height: 70vh;">
				<template v-if="curpopup==1">
					<view class="p-list wdh-100">
						<view @click="yongfa=item,popupflag=false" class="rowbox p-box"
							:class="{'p-sel':item.id==yongfa.id}" v-for="(item,index) in selList.yongfa" :key='index'>
							{{item.name}}
						</view>
					</view>
				</template>
				<template v-else-if="curpopup==2">
					<view class="p-list wdh-100">
						<view @click="changePinci(item)" class="rowbox p-box" :class="{'p-sel':item.id==pinci.id}"
							v-for="(item,index) in selList.pinci" :key='index'>
							{{item.name}}
						</view>
					</view>
				</template>
				<template v-else-if="curpopup==3">
					<view class="p-list wdh-100">
						<view @click="ylunit=item,popupflag=false" class="rowbox p-box"
							:class="{'p-sel':item.id==ylunit.id}" v-for="(item,index) in selList.ylunit" :key='index'>
							{{item.name}}
						</view>
					</view>
				</template>
				<template v-else-if="curpopup==4">
					<view class="p-list wdh-100">
						<view @click="kynuit=item,popupflag=false" class="rowbox p-box"
							:class="{'p-sel':item.id==kynuit.id}" v-for="(item,index) in selList.kynuit" :key='index'>
							{{item.name}}
						</view>
					</view>
				</template>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				popupflag: false,
				curpopup: 1, //用法
				info: '',
				yongfa: '',
				selList: [],
				pinci: '',
				ylunit: '',
				yongliang: '',
				daynum: '',
				kynuit: '',
				num: '',
				index: 0,
				updateflag: false
			};
		},
		onLoad(options) {
			this.info = JSON.parse(options.info)
			if (this.info.use) {
				this.index = Number(options.index)
				this.updateflag = true
			}
			this.getSetting()
		},
		methods: {
			changePinci(v) {
				this.pinci = v
				this.popupflag = false
				this.getNum()
			},
			// 判断数量
			getNum() {
				console.log(this.info.allnum)
				console.log(this.yongliang) //用量
				console.log(this.daynum) //天数
				console.log(this.pinci)

				if (this.pinci == '' || this.pinci.name == '1次/天') {
					this.num = Math.ceil(this.daynum * this.yongliang / this.info.allnum)
				} else if (this.pinci.num != 0) {
					this.num = Math.ceil(this.daynum * this.yongliang * this.pinci.num / this.info.allnum)
					this.num = this.num == 0 ? '' : this.num
				}
				// else if (this.pinci.name.indexOf('/天') > -1) {
				// 	this.num = Math.ceil(this.daynum * this.yongliang * (this.pinci.name.split('次')[0] * 1) / this.info
				// 		.allnum)
				// } else if (this.pinci.name.indexOf('小时') > -1) {
				// 	if (this.pinci.name == '1次/小时') {
				// 		this.num = Math.ceil(this.daynum * this
				// 			.yongliang * 24 / this
				// 			.info
				// 			.allnum)
				// 	} else {
				// 		this.num = Math.ceil(this.daynum * this
				// 			.yongliang * ((24 / (this.pinci.name.split('/')[1].split('小时')[0]) * 1)) / this
				// 			.info
				// 			.allnum)
				// 	}
				// } else if (this.pinci.name == '每晚1次' || this.pinci.name == '睡前服用' || this.pinci.name == '中午12点' || this
				// 	.pinci.name == '午夜12点') {
				// 	this.num = Math.ceil(this.daynum * this.yongliang / this.info.allnum)
				// } else if (this.pinci.name == '隔天1次') {
				// 	this.num = Math.ceil(this.daynum * this.yongliang / 2 / this.info.allnum)
				// } else if (this.pinci.name.indexOf('次/周') > -1) {
				// 	this.num = Math.ceil(this.daynum * this.yongliang / (this.pinci.name.split('次/周')[0] * 7) / this.info
				// 		.allnum)
				// } else if (this.pinci.name == '每两周一次') {
				// 	this.num = Math.ceil(this.daynum * this.yongliang / 14 / this.info
				// 		.allnum)
				// } else if (this.pinci.name == '每三周一次') {
				// 	this.num = Math.ceil(this.daynum * this.yongliang / 21 / this.info
				// 		.allnum)
				// } else if (this.pinci.name == '隔周一次') {
				// 	this.num = Math.ceil(this.daynum * this.yongliang / 21 / this.info
				// 		.allnum)
				// }
			},
			confirmInfo() {
				if (this.yongfa == '') {
					uni.showToast({
						title: '请选择用法',
						icon: 'none'
					})
					return false
				}
				if (this.pinci == '') {
					uni.showToast({
						title: '请选择使用频次',
						icon: 'none'
					})
					return false
				}
				if (this.yongliang == '') {
					uni.showToast({
						title: '请输入每次用量',
						icon: 'none'
					})
					return false
				}
				if (this.ylunit == '') {
					uni.showToast({
						title: '请选择每次用量单位',
						icon: 'none'
					})
					return false
				}
				if (this.daynum == '') {
					uni.showToast({
						title: '请输入用药天数',
						icon: 'none'
					})
					return false
				}
				if (this.num == '') {
					uni.showToast({
						title: '请输入开药数量',
						icon: 'none'
					})
					return false
				}
				if (this.kynuit == '') {
					uni.showToast({
						title: '请选择开药单位',
						icon: 'none'
					})
					return false
				}
				let useinfo = {
					use: {
						yongfa: this.yongfa,
						pinci: this.pinci,
						ylunit: this.ylunit,
						yongliang: this.yongliang,
						daynum: this.daynum,
						kynuit: this.kynuit,
						num: this.num
					}
				}
				let obj = Object.assign({}, this.info, useinfo)
				let pages = getCurrentPages(); //获取所有页面栈实例列表
				let nowPage = pages[pages.length - 1]; //当前页页面实例
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				if (!this.updateflag) {
					prevPage.$vm.infoList.push(obj)
				} else {
					this.$set(prevPage.$vm.infoList, this.index, obj)
				}
				console.log('=======',obj)
				uni.navigateBack()
			},
			yfChange(e) {
				this.yongfa = this.selList.yongfa[e.detail.value]
			},
			pinciChange(e) {
				this.pinci = this.selList.pinci[e.detail.value]
			},
			ylunitChange(e) {
				this.ylunit = this.selList.ylunit[e.detail.value]
			},
			kynuitChange(e) {
				this.kynuit = this.selList.kynuit[e.detail.value]
			},
			getSetting() {
				this.$req.post('/doctor/yongfayongliang').then(res => {
					this.selList = res.data.data
					if (this.info.use) {
						this.yongfa = this.info.use.yongfa
						this.pinci = this.info.use.pinci
						this.ylunit = this.info.use.ylunit
						this.yongliang = this.info.use.yongliang
						this.daynum = this.info.use.daynum
						this.kynuit = this.info.use.kynuit ? this.info.use.kynuit : ''
						this.num = this.info.use.num
					} else {
						let yf = ''
						res.data.data.yongfa.forEach(resp => {
							if (resp.id == this.info.yongfa * 1) {
								yf = resp.name
							}
						})
						this.yongfa = {
							id: this.info.yongfa * 1,
							name: yf
						}
						let pc = ''
						let pcnum = 0
						res.data.data.pinci.forEach(resp => {
							if (resp.id == this.info.pinci * 1) {
								pc = resp.name
								pcnum = resp.num
							}
						})
						this.pinci = {
							id: this.info.pinci * 1,
							name: pc,
							num: pcnum
						}

						this.yongliang = this.info.yongliang

						let yl = ''
						res.data.data.ylunit.forEach(resp => {
							if (resp.id == this.info.ylunit * 1) {
								yl = resp.name
							}
						})
						this.ylunit = {
							id: this.info.ylunit * 1,
							name: yl
						}

						let ky = ''
						res.data.data.kynuit.forEach(resp => {
							if (resp.id == this.info.kynuit * 1) {
								ky = resp.name
							}
						})
						this.kynuit = {
							id: this.info.kynuit * 1,
							name: ky
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #F5F8FB;
		font-family: PingFang SC;
		min-height: 100vh;
		justify-content: flex-start;
	}


	.one-info {
		background: #fff;
		width: 100%;
		padding: 32rpx 32rpx;
		border-bottom: #F5F8FB solid 1px;
		margin-bottom: 20rpx;

		.m-img {
			width: 150rpx;
			height: 150rpx;
			border-radius: 10rpx;
		}

		.m-detail {
			height: 150rpx;
			width: calc(100% - 170rpx);
			margin-left: 20rpx;
			justify-content: space-between;
		}

		.m-name {
			font-size: 32rpx;
			font-weight: bold;
		}

		.m-desc {
			font-size: 24rpx;
			color: #7c7d7d;
		}

		.price-info {
			font-size: 32rpx;
			color: #fc2c21;
			font-weight: bold;
		}

		.stock {
			color: #7c7d7d;
			font-size: 24rpx;
			margin-left: 20rpx;
		}
	}

	.u-box {
		width: 750rpx;
		background: #fff;
		padding: 32rpx 20rpx;
		border-bottom: #F5F5FB solid 1px;
		font-size: 28rpx;

		input {
			text-align: right;
			font-size: 28rpx;
			border: #F5F5FB solid 1px;
			padding: 10rpx 20rpx;
			width: 200rpx;
			margin-right: 20rpx;
		}
	}

	.p-title {
		padding: 32rpx 32rpx;
		font-size: 32rpx;
	}

	.p-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: flex-start;
		box-sizing: border-box;
		padding: 20rpx 20rpx;
	}

	.p-box {
		background: #eff2f2;
		color: #7e7e90;
		font-size: 28rpx;
		min-width: 159rpx;
		height: 70rpx;
		border-radius: 10rpx;
		margin: 0 10rpx;
		padding: 0 20rpx;
		margin-bottom: 20rpx;
	}

	.p-sel {
		background: #00b6b2;
		color: #fff;
	}
</style>